<template>
    <el-container class="cantainer-box">
        <el-header>
            <el-select v-model="paramForm.success" placeholder="请选择" style="width: 150px;margin-right: 10px;">
                <el-option v-for="item in statusTypeOption" :key="item.type" :value="item.type" :label="item.msg"></el-option>
            </el-select>
            <el-button type="primary" @click="refreshList">查询</el-button>
        </el-header>
        <el-main>

            <el-dialog v-model="dialogFormVisible" title="菜单" width="400">
                <el-form :model="timeStatusData.mkMemberForm">
                    <el-form-item label="刷题时长" label-width="100px">
                        <el-input v-model="timeStatusData.mkMemberForm.maxTimer" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="用户" label-width="100px">
                        <el-select v-model="timeStatusData.mkMemberForm.memberId" placeholder="请选择">
                            <el-option v-for="item in allMemberData.arrayData" :key="item.id" :value="item.id" :label="item.username"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="sureSubmitUser">确定</el-button>
                </div>
                </template>
            </el-dialog>

            <div style="display: flex;">
                <el-button type="primary" @click="addMkTimeStatus">添加</el-button>
                <div style="width: 200px">
                    <el-form-item label="开始位置" label-width="80px">
                        <el-input v-model="startNum" autocomplete="off" />
                    </el-form-item>
                </div>
            </div>

            <el-table :data="memberState.pageData.records" style="width: 100%">
                <el-table-column fixed="left" label="操作" min-width="70" v-slot="scope">
                    <el-button link type="primary" size="small" @click="runDoQuestion(scope.row)">刷时长</el-button>
                    <el-button link type="primary" size="small" @click="editMkTimeStatus(scope.row)">编辑</el-button>
                    <el-button link type="primary" size="small" @click="delMkTimeStatus(scope.row)">删除</el-button>
                </el-table-column>
                
                <el-table-column prop="username" label="用户" min-width="70"></el-table-column>
                <el-table-column prop="maxTimer" label="目标时间（秒）" min-width="80"></el-table-column>
                <el-table-column prop="nowTimer" label="做题时间" min-width="80"></el-table-column>
                <el-table-column prop="updateTime" label="更新时间" min-width="100"></el-table-column>
                
            </el-table>
        </el-main>
        <el-footer>
            <div class="demo-pagination-block">
                <el-pagination
                    v-model:current-page="memberState.pageData.pageNum"
                    v-model:page-size="memberState.pageData.pageSize"
                    :page-sizes="[10, 20, 50, 100]"
                    :size="size"
                    :disabled="disabled"
                    :background="background"
                    layout="sizes, prev, pager, next"
                    :total="memberState.pageData.recordsTotal"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </el-footer>
    </el-container>

</template>

<script setup lang="ts" name="MkEveryDayStatus">


import { ref,reactive, onMounted } from 'vue'
import { addDoQuestionTimeByIdApi } from '@/http/api/mk/mkDoQuestion';
import type { ComponentSize  } from 'element-plus';
import { ElMessage } from 'element-plus';
import { MyPageData } from '@/bean/base/page';
import { addTimeStatusApi, delTimeStatusApi, getTimeStatusVoListApi, updateTimeStatusApi } from '@/http/api/mk/mkTimeStatus';
import { MkTimeStatusData, MkTimeStatusType } from '@/bean/mk/MkTimeStatus';
import { memberAllApi } from '@/http/api/mk/mkMember';
import { MkMember } from '@/bean/mk/MkMember';
import { MyArrayData } from '@/bean/base/base';


const dialogFormVisible = ref(false);

const statusTypeOption = [
    {type:-1,msg:"全部"},
    {type:1,msg:"完成用户"},
    {type:0,msg:"未完成用户"}
];

const paramForm = reactive({
    pageNum: 1,
    pageSize: 10,
    success : -1
})


const startNum = ref(0);

const allMemberData = reactive(new MyArrayData<MkMember>());


const timeStatusData = reactive(new MkTimeStatusData());

const memberState = reactive(new MyPageData<MkTimeStatusType>);




onMounted(() => {
    refreshList();
    getAllMember();
})

//获取页面数据
async function refreshList() {
    getTimeStatusVoListApi(paramForm).then((res)=>{
        memberState.pageData = res.data;
    });
}


function getAllMember() {
    memberAllApi().then((res)=>{
        allMemberData.arrayData = res.data;
    });
}


function runDoQuestion(item:any) {
    let tempParam = {
        id:item.memberId,
        startNum:startNum.value
    };
    addDoQuestionTimeByIdApi(tempParam).then((res:any)=>{
        ElMessage({
            message: res.msg,
            type: 'success',
        })
    });
}

function editMkTimeStatus(item:MkTimeStatusType) {
    dialogFormVisible.value = true;
    timeStatusData.mkMemberForm = item;
}


function delMkTimeStatus(item:MkTimeStatusType) {
    let tempParam = {id:item.id};
    delTimeStatusApi(tempParam).then((res) => {
        if(res.code != 200) return;
        ElMessage({
            message: '操作成功',
            type: 'success',
        })
        refreshList();
    })
}

function addMkTimeStatus(item:MkTimeStatusType) {
    dialogFormVisible.value = true;
    timeStatusData.mkMemberForm = new MkTimeStatusData().mkMemberForm;
}


function sureSubmitUser() {
    if(timeStatusData.mkMemberForm.id == null) {
        addTimeStatusApi(timeStatusData.mkMemberForm).then((res) => {
            if(res.code != 200) return;
            ElMessage({
                message: '操作成功',
                type: 'success',
            })
            dialogFormVisible.value = false;
            refreshList();
        })
    } else {
        updateTimeStatusApi(timeStatusData.mkMemberForm).then((res) => {
            if(res.code != 200) return;
            ElMessage({
                message: '操作成功',
                type: 'success',
            })
            dialogFormVisible.value = false;
            refreshList();
        })
    }
}




const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
    paramForm.pageSize = val;
    refreshList();
}
const handleCurrentChange = (val: number) => {
    paramForm.pageNum = val;
    refreshList();
}

</script>

<style scoped>
.default-table-box,.el-container {
  width: 100%;
  height: 100%;
}

.el-footer {
    height: 80px;
}
    
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}

</style>